<div class="card">
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-12">
                <filter-list request="request" callback="loadFiles(pageIndex)"></filter-list>
                
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-6">
                <a class="btn btn-sm btn-primary px-3" ng-if="backUrl" href="{{backUrl}}"><i
                    class="fas fa-reply"></i> Back</a>
            </div>
            <div class="col-6">
                <mix-file-upload folder="request.key" on-success="loadFiles()">
                </mix-file-upload>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <table class="table table-sm table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col" width="30%">
                                Name
                            </th>
                            <th scope="col">
                                WebPath
                            </th>
                            <th scope="col" width="15%">
                                Preview
                            </th>
                            <th scope="col" width="5%" class="text-right">
                                Actions
                            </th>
                        </tr>
                    </thead>

                    <tbody class="sortable" ng-init="loadFiles()">
                        <tr ng-repeat="d in data.directories track by $index">
                            <td class="text-primary">
                                <span class="fas fa-folder mr-2"></span>
                                <a ng-click="loadPage(d)" class="btn btn-sm text-primary" ng-bind="d"></a>
                            </td>
                            <td colspan="3"></td>
                        </tr>
                        <tr ng-repeat="item in data.files track by $index" class="sortable-item" sort-model="file"
                            sort-model-id="{{item.id}}">
                            <td>
                                <small ng-bind="item.fileName"></small>
                            </td>
                            <td>
                                <div class="input-group input-group-sm">
                                    <input id="path-modal-{{$index}}" value="{{item.webPath}}" onclick="this.select()"
                                        class="form-control form-control-sm" readonly="readonly">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary btn-clipboard" type="button"
                                            data-clipboard-target="#path-modal-{{$index}}"><i
                                                class="mi mi-Copy"></i></button>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <!--<img imageonload src="{{item.fullPath}}" height="50" />-->
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                    aria-label="Actions">
                                    <a href="/portal/file/details?folder={{item.fileFolder}}&filename={{item.fileName}}{{item.extension}}"
                                        class="btn btn-link">
                                        <span class="fa fa-pen text-primary"></span>
                                    </a>
                                    <a href="{{item.webPath}}" target="_blank" class="btn btn-link">
                                        <span class="fas fa-eye text-primary"></span>
                                    </a>

                                    <button type="button" class="btn btn-link del-popover"
                                        ng-click="removeFile(item.fullPath)">
                                        <span class="fas fa-trash-alt text-danger"></span>
                                    </button>
                                    <div class="popover-body d-none">
                                        <a href="/{{currentLanguage}}/portal/files/delete/{{item.fullPath}}"
                                            class="btn btn btn-danger">Yes, I want to delete!</a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="card-footer">

        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
            ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="loadFiles(page-1)"
            scroll-top="true">
    </div>
</div>